<template>
  <div class="oh box">
    <header class="tc w100">
      <div class="title pr pr20 pl20">
        <img @click="back" class="pa" src="../../../assets/img/home-img/left-arrows.png">
        <h1 class="f35 cfff fn">导航</h1>
      </div>
    </header>
    <div class="mapContent bcfff ml20 mr20">
      <div id="map1"></div>
    </div>
    <main class="bcfff ">
      <ul class="footer  bcff bs flex pf w100 jcsb f20 aic">
        <li>
          <h2 class="pb20 f35">车百事汽车生活馆</h2>
          <p>山阳区人民路与解放路交叉口</p>
        </li>
        <li class="pr15">
          <a href="#" class="pay-order f25 cfff">
            导航
          </a>
        </li>
      </ul>
    </main>
  </div>
</template>
<script>
export default {
  mounted() {
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("map1");    // 创建Map实例
    // 初始化地图,设置中心点坐标和地图级别     113.578744,34.809352
    map.centerAndZoom(new BMapGL.Point(113.701303, 34.786951), 10);
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    var myIcon = new BMapGL.Icon(require('../../../assets/img/car-repair-img/stores-tab.png'), new BMapGL.Size(20, 30), {
      anchor: new BMapGL.Size(10, 30),
    });
    var point = new BMapGL.Point(113.566198, 34.705087);
    // 创建标注对象并添加到地图  
    var marker = new BMapGL.Marker(point, { icon: myIcon });
    map.addOverlay(marker);
  },
  methods:{
    back() {
      this.$router.push({
        path: '/upWash'
      })
    },
  }
}
</script>
<style>
.box main {
  padding: 0 20rem;
}

header .title {
  height: 145rem;
  line-height: 145rem;
}

header {
  height: 435rem;
  background-color: #3385fd;
}

header img {
  height: 36rem;
  width: auto;
  left: 20rem;
  top: 50%;
  margin-top: -18rem;
}

.box .mapContent {
  padding: 20rem 20rem 0;
  border-radius: 20rem 20rem 0 0;
  margin-top: -300rem;
}

#map1 {
  width: 100%;
  height: 1025rem;
  border-radius: 20rem 20rem 0 0;
}

main ul {
  display: flex;
  justify-content: space-between;
}

main ul li .destined {
  padding: 20rem 0;
  width: 150rem;
  border: none;
  border-radius: 33rem;
  background-color: #2779f6;
  color: #fff;
  height: 70rem;
}

ul.footer {
  height: 150rem;
  left: 0;
  bottom: 0;
  padding: 0 20rem;
  background-color: #fff;
}

ul.footer img.waiter {
  height: 40rem;
  width: auto;
  vertical-align: middle;
}

ul.footer a.pay-order {
  background-color: #1e72f0;
  padding: 20rem 50rem;
  border-radius: 50rem;
}</style>